<template>
  <div>
    <div class="flex-container">
      <div class="flex-item">
        <div id="card">
          <img id="image" src="./assets/Login.png" alt="图片" width="40%" height="auto">
          <div id="text">
            <a-typography-title :heading="2">
              Hi, 朋友
            </a-typography-title>
            <a-typography-text>
              欢迎回来，让我们一起开启学习之旅吧！
            </a-typography-text>
          </div>
        </div>
      </div>
      <div class="flex-item">
        <div id="right">
          <div id="title">
            <div style="flex:2">
              <button class="next">&#8249;</button>
            </div>
            <div style="flex:3;">
              <a-typography-title :heading="2">
                登录
              </a-typography-title>
            </div>
          </div>
          <div>
           
            <a-space direction="vertical" size="large">
              <p>用户名</p>
              <a-input :style="{ width: '320px' }" placeholder="请输入用户名" allow-clear>
                <template #prefix>
                  <icon-user />
                </template>
              </a-input>
              <p>密码</p>
              <a-input :style="{ width: '320px' ,height:'50px'}" placeholder="请输入密码" allow-clear>
                <template #suffix>
                  <icon-info-circle />
                </template>
              </a-input>
            </a-space>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style>
/* 设置父容器为 Flex 容器 */
.flex-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  /* 设置容器高度为视口高度 */
}

/* 设置每个子元素占据父容器宽度的 50% */
.flex-item {
  flex: 1;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 为了便于观察，添加边框 */
}

#card {
  border: thin solid #E5E5E5;
  margin: 0 0 0 10%;
  padding: 10px;
  border-radius: 20px;
  width: 70%;
  height: 80%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;

}

#image {
  margin: 0% auto 30%;
}

#text {
  margin-bottom: 10%;
  text-align: center;

}

#right {
  height: 90%;
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#title {
  display: flex;
  margin-top: 5%;
  width: 100%;
}


.next {
  background-color: #7BE188;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
  margin-top: 32px;
  margin-bottom: 16px;
  /* margin-top: 20%;
  margin-left: 10%; */
}

.next:hover {
  background-color: #5cbf7d;
}
</style>
